<template>
	<view>
		<view class="saying position-relative " :style="{'background-image': `url(${cosUrl}/bg/famousquotes.png)`}">
			<view class="title">{{title}}</view>
			<view class="celebrity d-flex justify-content-end align-items-center">
				<text class="pr-1 line-m"></text>{{celebrity}}
			</view>
			<image class="position-absolute" src="../../static/website/quote.png" mode=""></image>
		</view>
		<view class="footer px-2">
			<view class="row row-cols-2 mx-0" style="padding-top: 28px;">
				<view class="col px-0 text-center" style="padding-top: 35px;" v-for="v,i in footer" :key="i">
					<image :src="require(`../../static/website/footer${i}.svg`)" mode=""></image>
					<view class="title">{{v}}</view>
				</view>
			</view>
			<view class="lines w-100"></view>
			<view class="copyright text-center">
				Copyright © 2021 版权所有：成都亚克茜科技有限公司 ALL Rights Reserved
			</view>
			<view class="filingno text-center">
				网站备案号：蜀ICP备20025102号-1
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Footer",
		props: {
			title: {
				type: String,
				default: '只有优秀的应用UI只有优秀的应用UI设计才能给用户植入产品记忆点'
			},
			celebrity: {
				type: String,
				default: '亚克茜'
			}
		},
		data() {
			return {
				footer: ['UI定制服务', '公众号开发', '小程序开发', '网站开发'],
			};
		}
	}
</script>

<style lang="scss" scoped>
	.saying {
		// background: url('../../static/website/famousquotes.png');
		width: 100%;
		height: 244rpx;
		background-size: cover;
		padding: 40rpx 38rpx 0;

		.title {
			font-size: 36rpx;
			font-family: PingFangSC-Light, PingFang SC;
			font-weight: 300;
			color: #FDFDFD;
			line-height: 50rpx;
		}

		.celebrity {
			font-size: 32rpx;
			font-family: PingFangSC-Light, PingFang SC;
			font-weight: 300;
			color: #FDFDFD;
			line-height: 44rpx;
			padding-right: 70rpx;
		}

		image {
			width: 112rpx;
			height: 112rpx;
			right: 0;
			bottom: -56rpx;
		}

		.line-m {
			width: 86rpx;
			border-bottom: 2rpx solid #E5E5E5;
			margin-right: 14rpx;
		}
	}

	.footer {
		background: #292E31;
		border: 1px solid #979797;
		/* #ifdef MP-WEIXIN ||MP-TOUTIAO*/
		padding-bottom: 150rpx;
		/* #endif */

		image {
			width: 122rpx;
			height: 122rpx;
		}

		.title {
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #F8F8F8;
			line-height: 48rpx;
			padding-top: 22rpx;
		}

		.lines {
			border: 2rpx solid #404040;
			margin-top: 116rpx;
			margin-bottom: 46rpx;
		}

		.copyright {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #F8F8F8;
			line-height: 44rpx;
			padding: 0 46rpx;
		}

		.filingno {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #F8F8F8;
			line-height: 44rpx;
			padding: 32rpx 0 48rpx;
		}
	}
</style>
